<template>
  <div id="login">
    <div class="lang" @click="to('lang')" >切换语言</div>
    <img class="kf" src="@/assets/images/kf.png" alt="" />
    <div class="login-wrapper">
      <img src="@/assets/images/titleicon.png" />

      <Form @submit="onSubmit">
        <Field
          v-model="username"
          name="username"
          placeholder="请输入账号"
          left-icon="manager"
        />
        <Field
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入密码"
          left-icon="lock"
        />
        <button round block type="info" native-type="submit">登入</button>
        <div class="btn">
          <div @click="to('register')">立即注册</div>
          <div>忘记密码</div>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
import { Form, Field } from 'vant'

import api from "@/request/API"
export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
      api.login().then(res=>{
        console.log(1111111111111)
        this.$router.push({path:'/'})
      })
    },
    to(to){
      this.$router.push({path:to})
    }
  }
}
</script>

<style lang="less" scoped>
#login {
  .lang {
    line-height: 74px;
    text-align: center;
  }
  .login-wrapper {
    display: flex;
    flex-direction: column;
    width: 80%;
    padding-top: 50px;
    margin: 0 auto;
    .van-cell {
      margin: 10px 0;
      padding: 8px 15px;
      border-radius: 30px;
      border: solid 1px #e6eaed;
      font-size: 14px;
    }
    img {
      margin: 30px auto;
      width: 200px;
    }
    button {
      margin: 40px 0;
      border: none;
      width: 100%;
      border-radius: 200px;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      background: #588bf7;
      color: #fff;
    }
    .btn {
      display: flex;
      justify-content: space-between;
      color: #888;
    }
  }
  .kf {
    position: fixed;
    right: 15px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    border-radius: 200px;
    z-index: 99;
    text-align: center;
    background: #fff;
  }
}
</style>
